<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="backend-head-template">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/animated.min.css" th:href="@{/css/animated.min.css}">
    <link rel="stylesheet" href="../../static/css/custom.css" th:href="@{/css/custom.css}">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../../static/lib/scrollTo/jquery.scrollTo.min.js"
            th:src="@{/lib/scrollTo/jquery.scrollTo.min.js}"></script>
    <script src="../../static/lib/waypoint-js/jquery.waypoints.min.js"
            th:src="@{/lib/waypoint-js/jquery.waypoints.min.js}"></script>
    <title>后台管理</title>
</head>

<body>

<!-- 后台导航 menu -->
<nav th:fragment="backend-nav-menu-template"
     class="ui teal inverted attached segment custom-padded-tb-mini custom-nav-shadow-small">
    <div class="ui teal inverted container">
        <div class="ui secondary stackable menu">
            <h1 class="ui black header item">后台管理</h1>
            <a href="#" th:href="@{index}" class="click-to-show-nav-menu-list item custom-mobile-hide-menu">
            <i class="compass icon"></i>
            仪表盘
            </a>
            <a href="#" th:href="@{articles}" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"><i
                    class="edit icon"></i>文章</a>
            <a href="#" th:href="@{comments}" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"><i
                    class="comments icon"></i>评论</a>
            <a href="#" th:href="@{theme}" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"><i
                    class="pagelines icon"></i>外观</a>
            <a href="#" th:href="@{system}" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"><i
                    class="cogs icon"></i>系统</a>

            <div class="right click-to-show-nav-menu-list custom-mobile-hide-menu menu">
                <div class="ui dropdown item ">
                    <div class="text">
                        <img src="../../static/images/background/background.png" alt="" class="ui avatar image"
                             sizes="width: 100px">
                        用户名
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item" th:href="@{profile}"> <i class="user circle icon"></i> 个人信息</a>
                        <a href="#" class="item" th:href="@{change-password}"><i class="key icon"></i>修改密码</a>
                        <a href="#" class="item" th:href="@{logout}"><i class="times icon"></i>退出</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui menu toggle teal icon button custom-mobile-show-menu-position custom-mobile-show-menu-button">
        <i class="sidebar icon"></i>
    </div>
</nav>

<div th:fragment="backend-nav-secondary-menu-template(n)" class="ui attached pointing menu">
    <div class="ui container">
        <a href="#" class="item" th:classappend="${n==1} ? 'active'" th:href="@{articles}">
            <i class="book icon"></i>
            文章管理
        </a>
        <a href="#" class="item" th:classappend="${n==2} ? 'active'" th:href="@{blog}">
            <i class="edit icon"></i>
            写博客
        </a>
        <a href="#" class="item" th:classappend="${n==3} ? 'active'" th:href="@{categories}">
            <i class="folder open icon"></i>
            分类管理
        </a>
        <a href="#" class="item" th:classappend="${n==4} ? 'active'" th:href="@{tags}">
            <i class="tags icon"></i>
            标签管理
        </a>
    </div>
</div>


</body>
</html>